<template>
  <div>
    <!--搜索框-->
    <van-row>
      <van-col span="24">
        <van-search
            v-model="value"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
        />
      </van-col>
    </van-row>
    <!--轮播图-->
    <van-row>
      <van-swipe :autoplay="3000" lazy-render >
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image"  style="height: 250px"/>
        </van-swipe-item>
      </van-swipe>
    </van-row>
    <!--九宫格-->
    <van-grid :column-num="4">
      <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
    </van-grid>
    <!--卡片-->
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    />
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    />
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    />
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    />
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
      <template #num>
        <h1 style="color:red;">2</h1>
      </template>
      <template #desc>
        <h1 style="color:red;">2</h1>
      </template>
      <template #thumb>
        <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" style="width:150px;border-radius: 3px"/>
      </template>
    </van-card>

    <!--tab Bar-->
    <van-tabbar v-model="active">
      <van-tabbar-item badge="3">
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script setup>

import {ref} from "vue";

const active = ref(0);
const icon = {
  active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
  inactive:
      'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
}

const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

</script>


<style scoped>

</style>
